<template>
	<view>
		<view class="status_bar"></view>
		<u-sticky :h5-nav-height="0" class="index__top" bg-color="none" @fixed="stickTop=true" @unfixed="stickTop=false">
			<view class="status_bar" v-if="this.stickTop"></view>
			<view class="index__top--bg" v-if="this.stickTop">
				<p class="index__top__area">测试园区<u-icon name="arrow-down-fill" size="10" style="margin-left: 10rpx;">
					</u-icon>
				</p>
			</view>
			<view class="index__top--nonebg" v-else>
				<p class="index__top__area">测试园区<u-icon name="arrow-down-fill" size="10" style="margin-left: 10rpx;">
					</u-icon>
				</p>
			</view>
		</u-sticky>
		<view>
			<u-swiper :list="store.state.swiperList" mode="round" indicator-pos="bottomRight" height="440"></u-swiper>
		</view>
		<view class="index__func">
			<u-grid :col="4" :border="false">
				<u-grid-item>
					<image class="index__func__icon" src="/static/index/examine_approve.svg" mode="aspectFit"></image>
					<view class="grid-text">审批审核</view>
				</u-grid-item>
				<u-grid-item>
					<image class="index__func__icon" src="/static/index/notice.svg" mode="aspectFit"></image>
					<u-badge count="10" :offset="[20, 20]"></u-badge>
					<view class="grid-text">公告通知</view>
				</u-grid-item>
				<u-grid-item>
					<image class="index__func__icon" src="/static/index/shopping.svg" mode="aspectFit"></image>
					<view class="grid-text">办公采买</view>
				</u-grid-item>
				<u-grid-item>
					<image class="index__func__icon" src="/static/index/bill.svg" mode="aspectFit"></image>
					<view class="grid-text">物业账单</view>
				</u-grid-item>
				<u-grid-item>
					<image class="index__func__icon" src="/static/index/meeting_appointment.svg" mode="aspectFit">
					</image>
					<view class="grid-text">预约会议</view>
				</u-grid-item>
				<u-grid-item>
					<image class="index__func__icon" src="/static/index/more.svg" mode="aspectFit"></image>
					<view class="grid-text">更多</view>
				</u-grid-item>
			</u-grid>
		</view>
		<view class="index__article">
			<u-sticky :h5-nav-height="0" :offset-top="90" @fixed="stickArticleTabs=true" @unfixed="stickArticleTabs=false">
				<view class="status_bar" v-if="this.stickArticleTabs"></view>
				<view>
					<u-tabs-swiper ref="uTabs" :list="store.state.tabsList" :current="store.state.tabsCurrent"
						@change="tabsChange" :is-scroll="false" swiperWidth="750"></u-tabs-swiper>
				</view>
			</u-sticky>
			<swiper :current="store.state.tabsSwiperCurrent" @transition="transition" @animationfinish="animationfinish"
				class="index__article__list">
				<swiper-item class="swiper-item" v-for="(item, index) in store.state.tabsList" :key="index">
					<scroll-view scroll-y @scrolltolower="onreachBottom">
						<v-articleBox v-for="(artInfo, index) in item.articleList" :title="artInfo.title"
							:summary="artInfo.summary" :isTop="artInfo.isTop" :readNum="artInfo.readNum"
							:pubdate="artInfo.pubdate" :imgList="artInfo.imgList">
						</v-articleBox>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
		<u-tabbar :list="this.$store.state.tabbarList" :mid-button="true"
			:mid-button-size="this.$store.state.tabbarConfig.midButtonSize"
			:active-color="this.$store.state.tabbarConfig.activeColor"
			:inactive-color="this.$store.state.tabbarConfig.inactiveColor"></u-tabbar>
	</view>
</template>

<script>
	import store from './store.js'
	import articleBox from '../../../component/articleBox'

	export default {
		components: {
			'v-articleBox': articleBox,
		},
		data() {
			return {
				store: store,
				stickTop: false,
				stickArticleTabs:false,
			}
		},
		methods: {
			// tabs通知swiper切换
			tabsChange(index) {
				this.store.state.tabsSwiperCurrent = index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.store.state.tabsSwiperCurrent = current;
				this.store.state.tabsCurrent = current;
			},
			// scroll-view到底部加载更多
			onreachBottom() {

			}
		}
	}
</script>
<style lang="less">
	.index {
		&__top {
			position: absolute;
			left: 0px;
			top: var(--status-bar-height);
			right: 0px;
			z-index: 1000;
			&--bg{
				background-color: #FFFFFF;
			}
			&--nonebg{
				background-color: none;
			}
			&__area {
				padding: 30rpx;
			}
		}

		&__func {
			margin-top: 20rpx;
			margin-bottom: 20rpx;

			&__icon {
				width: 90rpx;
				height: 90rpx;
				margin-left: 50rpx;
				margin-right: 50rpx;
			}
		}

		&__article {
			display: flex;
			flex-direction: column;
			height: calc(100vh);

			&__list {
				flex: 1;
			}
		}
	}
</style>
<style>
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
		background-color: #FFFFFF;
	}
</style>
